<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,uc-fitscreen=yes">
    <title>首页</title>
    <link rel="stylesheet" href="./components/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/Normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./components/vue/vue.global.js"></script>
    <script src="./components/swiper/swiper-bundle.min.js"></script>
    <script src="./components/popper/popper.js"></script>
    <script src="./components/popper/popperInit.js"></script>
    <script src="./components/axios/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="headNav-wrap">
            <div class="container">
                <div class="left">
                    <div class="log-wrap">
                        <a href="./index.html" target="_blank" rel="noopener noreferrer"><img src="./assets/logo.png"
                                alt="" srcset=""></a>
                    </div>
                    <div class="mobile-menu" @click="handlMenuSwitch">
                        <div class="global-header-nav-btn" :class="menuShow ? 'global-header-btn-close' :'' ">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    <div class="nav-list" :class="menuShow ? 'menuOpen' :'' ">
                        <a href="http://" class="active">产品</a>
                        <a href="http://">解决方案</a>
                        <a href="http://">成功案例</a>
                        <a href="http://">资源中心</a>
                        <a href="http://">渠道加盟</a>
                        <a href="http://">关于数信</a>
                    </div>
                </div>
                <div class="login-wrap">
                    <a href="" class='mybutton-wrap Gradient'>
                        免费试用
                    </a>
                    <a href="" class='mybutton-wrap' style="margin-left: 26px;">
                        登录
                    </a>
                </div>
            </div>
        </div>
        <div class="index-wrap">
            <div class="swiper swiper_1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="bg-wrap" style="background-image:url(./assets/index1-bg.png)">
                            <div class="container" style="position: relative;">
                                <div class="btn-wrap">
                                    <a href="" class='mybutton-wrap primary noBorder'>
                                        点击测试
                                    </a>
                                    <a href="" class='mybutton-wrap white noBorder'>
                                        直接咨询
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="bg-wrap" style="background-image:url(./assets/index1-bg.png)">

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="bg-wrap" style="background-image:url(./assets/index1-bg.png)">

                        </div>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

            </div>

            <div class="banner-wrap">
                <div class="title h3">
                    企业数字营销系统
                </div>
                <div class="de h5">全场景全链路的一站式数字化系统，助力企业</div>
            </div>

            <div class="lc_2-wrap">
                <div class="swiper swiper_2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="bg-wrap" style="background-image:url(./assets/lc_2.png)">
                                <div class="mask"></div>
                                <div class="container">
                                    <div class="top-wrap">
                                        <div class="title h3" style="color: #fff;">
                                            数信-营销管理系统
                                        </div>
                                        <div class="de h6" style="color: #fff;">
                                            通过数字化工具赋能销售，实现推广内容标准化输出，并快速触达全国客户，实现多元互动转化，提高营
                                            销效率与成交能力，持续激活存量客户，帮助企业降本增效，全面提升企业核心竞争力
                                        </div>
                                        <div class="btn-wrap">
                                            <div class='mybutton-wrap primary noBorder'>
                                                立即试用
                                            </div>
                                            <div class='mybutton-wrap white noBorder' style="margin-left: 46px;">
                                                了解详情
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="bg-wrap" style="background-image:url(./assets/index1-bg.png)">
                                <div class="mask"></div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="bg-wrap" style="background-image:url(./assets/index1-bg.png)">
                                <div class="mask"></div>
                            </div>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
                <div class="box-list">
                    <div class="container">
                        <div class="box-wrap">
                            <div class="title">
                                <img src="./assets/lc2-1.png" alt="" srcset="">
                                <div class="text">营销管理</div>
                            </div>
                            <div class="de">帮助企业实现获客、留存、跟进、转化、复购等整个生命周期的管理…</div>
                            <div class="btn-wrap">
                                <a href="http://" class='mybutton-wrap primary noBorder'>
                                    立即试用
                                </a>
                                <a class="link" href="http://" target="_blank" rel="noopener noreferrer">了解详情></a>
                            </div>
                        </div>
                        <div class="box-wrap">
                            <div class="title">
                                <img src="./assets/lc2-2.png" alt="" srcset="">
                                <div class="text">客户中心</div>
                            </div>
                            <div class="de">可综合分析客户信息、数据访问记录，为企业提供精准客户画像服务…</div>
                            <div class="btn-wrap">
                                <a href="http://" class='mybutton-wrap primary noBorder'>
                                    立即试用
                                </a>
                                <a class="link" href="http://" target="_blank" rel="noopener noreferrer">了解详情></a>
                            </div>
                        </div>
                        <div class="box-wrap">
                            <div class="title">
                                <img src="./assets/lc2-3.png" alt="" srcset="">
                                <div class="text">数据中心</div>
                            </div>
                            <div class="de">将数据收集、存储、分析形成数据报表，助力企业快速了解市场与客户需求…</div>
                            <div class="btn-wrap">
                                <a href="http://" class='mybutton-wrap primary noBorder'>
                                    立即试用
                                </a>
                                <a class="link" href="http://" target="_blank" rel="noopener noreferrer">了解详情></a>
                            </div>
                        </div>
                        <div class="box-wrap">
                            <div class="title">
                                <img src="./assets/lc2-4.png" alt="" srcset="">
                                <div class="text">专属商城</div>
                            </div>
                            <div class="de">为企业定制专属商城，拓展销售渠道，升级供应链、积分兑换体系，助力企业提高用户粘性，降本增效…</div>
                            <div class="btn-wrap">
                                <a href="http://" class='mybutton-wrap primary noBorder'>
                                    立即试用
                                </a>
                                <a class="link" href="http://" target="_blank" rel="noopener noreferrer">了解详情></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lc_3-wrap">
                <div class="banner-wrap">
                    <div class="title h3">
                        团长私域分销系统
                    </div>
                    <div class="de h5">提供个性化、职业化、专业性展示，主力打造个人私欲数字营销</div>
                </div>
                <div class="mp-switch">
                    <div class="container">
                        <div class="nav-wrap">
                            <div class="item" @click="handlSwitchnav(0)" :class="mpSwitchActive==0? 'active' :''">
                                <img src="./assets/lc3icon-1.png" alt="" srcset="">
                                <span>个人数字名片</span>
                            </div>
                            <div class="item" @click="handlSwitchnav(1)" :class="mpSwitchActive==1? 'active' :''">
                                <img src="./assets/lc3icon-2.png" alt="" srcset="">
                                <span>职业数字名片</span>
                            </div>
                            <div class="item" @click="handlSwitchnav(2)" :class="mpSwitchActive==2? 'active' :''">
                                <img src="./assets/lc3icon-3.png" alt="" srcset="">
                                <span>客户中心</span>
                            </div>
                            <div class="item " @click="handlSwitchnav(3)" :class="mpSwitchActive==3? 'active' :''">
                                <img src="./assets/lc3icon-4.png" alt="" srcset="">
                                <span>个人分销商城</span>
                            </div>
                        </div>
                        <div class="content-wrap" v-if="mpSwitchActive == 0">
                            <div class="left-wrap">
                                <div class="title">数信-个人数字名片</div>
                                <div class="ul">
                                    <div class="li">个人私域营销深度服务</div>
                                    <div class="li">个人职业信息强化背景</div>
                                    <div class="li">私域营销获客轻松便捷</div>
                                    <div class="li">项目商机一手掌握</div>
                                    <div class="li">私域数据运营全方位支撑</div>
                                </div>
                                <div class="btn-wrap">
                                    <a href="" class='mybutton-wrap Gradient'>
                                        生成数字名片
                                    </a>
                                    <a href="" class='mybutton-wrap plain primary' style="margin-left: 26px;">
                                        在线体验
                                    </a>
                                </div>
                            </div>
                            <div class="bg-wrap" style="background-image: url(./assets/lc3-1.png);"></div>
                        </div>
                        <div class="content-wrap" v-if="mpSwitchActive == 1">
                            <div class="left-wrap">
                                <div class="title">数信-个人数字名片2</div>
                                <div class="ul">
                                    <div class="li">个人私域营销深度服务</div>
                                    <div class="li">个人职业信息强化背景</div>
                                    <div class="li">私域营销获客轻松便捷</div>
                                    <div class="li">项目商机一手掌握</div>
                                    <div class="li">私域数据运营全方位支撑</div>
                                </div>
                                <div class="btn-wrap">
                                    <a href="" class='mybutton-wrap Gradient'>
                                        生成数字名片
                                    </a>
                                    <a href="" class='mybutton-wrap plain primary' style="margin-left: 26px;">
                                        在线体验
                                    </a>
                                </div>
                            </div>
                            <div class="bg-wrap" style="background-image: url(./assets/lc3-1.png);"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lc_4-wrap">
                <div class="banner-wrap">
                    <div class="title h3">
                        数字私域解决方案
                    </div>
                    <div class="de h5">数字私域、品牌零售、视频号运营、企业员工福利、供应链、数信都有完整解决方案</div>
                </div>
                <div class="container">
                    <div class="lc_4-nav">
                        <div class="item" @click="handlc_4Switch(0)" :class="lc_4Active==0? 'active' :''">私域</div>
                        <div class="item" @click="handlc_4Switch(1)" :class="lc_4Active==1? 'active' :''">品牌零售</div>
                        <div class="item" @click="handlc_4Switch(2)" :class="lc_4Active==2? 'active' :''">视频号</div>
                        <div class="item" @click="handlc_4Switch(3)" :class="lc_4Active==3? 'active' :''">员工福利</div>
                        <div class="item" @click="handlc_4Switch(4)" :class="lc_4Active==4? 'active' :''">供应链</div>
                    </div>
                    <div class="lc_4-main-warp" v-if="lc_4Active == 0">
                        <div class="bg" style="background-image: url(./assets/lc4-1.png);"></div>
                        <div class="content">
                            <div class="title">私域运营解决方案</div>
                            <div class="de">为各产业与企业提供数字化私域咨询规划服务，助力打造私域中台，提供全链路运营服务。</div>
                            <div class="tag-wrap">
                                <div class="item">二次开发</div>
                                <div class="item">流量获取</div>
                                <div class="item">老客户激活</div>
                                <div class="item">用户留存</div>
                                <div class="item">营销变现</div>
                                <div class="item">持续裂变</div>
                            </div>
                            <div class="goDetails-wrap">
                                <a href="http://" target="_blank" rel="" style="color: #FF5555;">了解详情</a>
                                <img src="./assets/icon-right-red.png" alt="" srcset="">
                            </div>
                        </div>
                    </div>
                    <div class="lc_4-main-warp" v-if="lc_4Active == 1">
                        <div class="bg" style="background-image: url(./assets/lc4-1.png);"></div>
                        <div class="content">
                            <div class="title">私域运营解决方案2</div>
                            <div class="de">为各产业与企业提供数字化私域咨询规划服务，助力打造私域中台，提供全链路运营服务。</div>
                            <div class="tag-wrap">
                                <div class="item">二次开发</div>
                                <div class="item">流量获取</div>
                                <div class="item">老客户激活</div>
                                <div class="item">用户留存</div>
                                <div class="item">营销变现</div>
                                <div class="item">持续裂变</div>
                            </div>
                            <div class="goDetails-wrap">
                                <a href="http://" target="_blank" rel="" style="color: #FF5555;">了解详情</a>
                                <img src="./assets/icon-right-red.png" alt="" srcset="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lc_5-wrap">
                <div class="banner-wrap">
                    <div class="title h3">
                        成功案例
                    </div>
                    <div class="goDetails-wrap">
                        <a href="http://" target="_blank" rel="">查看更多案例</a>
                        <img src="./assets/icon-right-blue.png" alt="" srcset="">
                    </div>
                </div>
                <div class="lc_5-nav">
                    <div class="container">
                        <div class="item" @click="handlc_5Switch(0)" :class="lc_5Active==0? 'active' :''">私域</div>
                        <div class="item" @click="handlc_5Switch(1)" :class="lc_5Active==1? 'active' :''">品牌零售</div>
                        <div class="item" @click="handlc_5Switch(2)" :class="lc_5Active==2? 'active' :''">视频号</div>
                        <div class="item" @click="handlc_5Switch(3)" :class="lc_5Active==3? 'active' :''">员工福利</div>
                        <div class="item" @click="handlc_5Switch(4)" :class="lc_5Active==4? 'active' :''">供应链</div>
                    </div>
                </div>
                <div class="container">
                    <div class="lc_5-main-warp" v-if="lc_5Active == 0">
                        <div class="content">
                            <div class="title">湖南汉王酒业</div>
                            <div class="de">通过数字化工具赋能，搭建专属私域商城，以润币为抓手，反复触达老客户，多渠道提升复购与转化。</div>
                            <div class="nubel-wrap">
                                <div class="item">
                                    <div class="s1">99.9%</div>
                                    <div class="s2">老客户转化率</div>
                                </div>
                                <div class="item" style="margin-left: 82px;">
                                    <div class="s1">66.6%</div>
                                    <div class="s2">私域复购率</div>
                                </div>
                            </div>
                        </div>
                        <div class="bg" style="background-image: url(./assets/lc5-1.png);"></div>
                    </div>
                    <div class="lc_5-main-warp" v-if="lc_5Active == 1">
                        <div class="content">
                            <div class="title">湖南汉王酒业2</div>
                            <div class="de">通过数字化工具赋能，搭建专属私域商城，以润币为抓手，反复触达老客户，多渠道提升复购与转化。</div>
                            <div class="nubel-wrap">
                                <div class="item">
                                    <div class="s1">99.9%</div>
                                    <div class="s2">老客户转化率</div>
                                </div>
                                <div class="item" style="margin-left: 82px;">
                                    <div class="s1">66.6%</div>
                                    <div class="s2">私域复购率</div>
                                </div>
                            </div>
                        </div>
                        <div class="bg" style="background-image: url(./assets/lc5-1.png);"></div>
                    </div>
                </div>
            </div>

            <div class="lc_6-wrap">
                <div class="banner-wrap2">
                    <div class="de h5">数信陪你一起做好企业</div>
                    <div class="title h3">
                        为企业数字化转型，提供全方位的资源和服务
                    </div>
                </div>
                <div class="container">
                    <div class="box-wrap">
                        <div class="item">
                            <div class="bg" style="background-image: url(./assets/lc6-1.png);"></div>
                            <div class="content">
                                <div class="title">2024数字化行业报告</div>
                                <div class="de">简介｜2024年国内外数字转型与应用情况简介｜2024年国内外数字转型与应用情况</div>
                                <div class="goDetails-wrap">
                                    <a href="http://" target="_blank" rel="">点击领取 ></a>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="bg" style="background-image: url(./assets/lc6-2.png);"></div>
                            <div class="content">
                                <div class="title">学无止境独家私塾视频</div>
                                <div class="de">知名企业家关于企业管理心得分享…</div>
                                <div class="goDetails-wrap">
                                    <a href="http://" target="_blank" rel="">点击查看更多 ></a>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="bg" style="background-image: url(./assets/lc6-3.png);"></div>
                            <div class="content">
                                <div class="title">专业贴心的咨询服务</div>
                                <div class="de">资深行业专家1V1在线服务…</div>
                                <div class="goDetails-wrap">
                                    <a href="http://" target="_blank" rel="">点击咨询 ></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lc_7-wrap">
                <div class="banner-wrap2">
                    <div class="de h5">数信专业度与安全性，业内有口皆碑</div>
                    <div class="title h3">
                        专注为客户提供稳定、安全、好用的产品与服务
                    </div>
                </div>
                <div class="container">
                    <div class="icon-wrap">
                        <div class="item">
                            <img src="./assets/lc7-1.png" alt="" sizes="" srcset="">
                            <span>信息安全管理 系统认证</span>
                        </div>
                        <div class="item">
                            <img src="./assets/lc7-2.png" alt="" sizes="" srcset="">
                            <span>个人数字管理系统</span>
                        </div>
                        <div class="item">
                            <img src="./assets/lc7-3.png" alt="" sizes="" srcset="">
                            <span>会务通系统</span>
                        </div>
                        <div class="item">
                            <img src="./assets/lc7-4.png" alt="" sizes="" srcset="">
                            <span>企业数字管理系统</span>
                        </div>
                        <div class="item">
                            <img src="./assets/lc7-5.png" alt="" sizes="" srcset="">
                            <span>商协会数字管理系统</span>
                        </div>
                        <div class="item">
                            <img src="./assets/lc7-6.png" alt="" sizes="" srcset="">
                            <span>薪福得平台</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lc_8-wrap">
                <div class="banner-wrap">
                    <div class="title h3">
                        一健开启数字化之旅，用数字驱动营销增长
                    </div>
                    <div class="de h5">链接数信，连接未来</div>
                </div>
                <div class="container">
                    <div class="content">
                        <div class="left">
                            <div class="title">
                                <img src="./assets/lc8-icon.png" alt="" sizes="" srcset="">
                                <span>与我们联系</span>
                            </div>
                            <div class="de">将有专人为您提供数字化转型建议、解决方案、专业答疑</div>
                            <div class="form-wrap">
                                <input type="text" v-model="PhoneVerify.phone"  placeholder="请输入手机号">
                                <div class="PhoneVerify" v-if="PhoneVerify.show">{{PhoneVerify.text}}</div>
                                <div class="mybutton-wrap primary" style="margin-top: 20px;" @click="handlyySubmit">预约回电</div>
                            </div>
                            <div class="goDetails-wrap">
                                <a href="http://" target="_blank" rel="">与数字化专家交流 ></a>
                            </div>
                        </div>
                        <img src="./assets/lc8-1.png" alt="" sizes="" srcset="">
                    </div>
                </div>
            </div>
        </div>
        <div class="font-wrap">
            <div class="container">
                <div class="left">
                    <div class="list">
                        <div class="item">
                            <div class="s1">产品</div>
                            <a href="" class="s2">企业数字营销系统</a>
                            <a href="" class="s2">个人数字营销系统</a>
                        </div>
                        <div class="item">
                            <div class="s1">解决方案</div>
                            <a href="" class="s2">私域运营解决方案</a>
                            <a href="" class="s2">品牌零售运营解决方案</a>
                            <a href="" class="s2">视频号运营解决方案</a>
                            <a href="" class="s2">企业员工福利解决方案</a>
                            <a href="" class="s2">供应链服务解决方案</a>
                        </div>
                        <div class="item">
                            <div class="s1">资源中心</div>
                            <a href="" class="s2">数信私塾</a>
                            <a href="" class="s2">行业报告</a>
                            <a href="" class="s2">数字化小工具</a>
                        </div>
                        <div class="item">
                            <div class="s1">渠道加盟</div>
                            <a href="" class="s2">加盟政策</a>
                            <a href="" class="s2">我要加盟</a>
                        </div>
                        <div class="item">
                            <div class="s1">关于数信</div>
                            <a href="" class="s2">企业简介</a>
                            <a href="" class="s2">集团简介</a>
                            <a href="" class="s2">新闻资讯</a>
                            <a href="" class="s2">加入我们</a>
                        </div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="right">
                    <div class="gy-wrap">
                        <div class="title">关注微信</div>
                        <div class="gy-list">
                            <div class="item">
                                <div class="img-box">
                                    <img src="./assets/13353749986402008.png" alt="">
                                </div>
                                <div class="text">扫码进入数信 企业微信群</div>
                            </div>
                            <div class="item">
                                <div class="img-box">
                                    <img src="" alt="">
                                </div>
                                <div class="text">扫码下载数信APP</div>
                            </div>
                            <div class="item">
                                <div class="img-box">
                                    <img src="" alt="">
                                </div>
                                <div class="text">扫码体验数信小程序</div>
                            </div>
                            <div class="item">
                                <div class="img-box">
                                    <img src="" alt="">
                                </div>
                                <div class="text">扫码关注数信公众号</div>
                            </div>
                        </div>
                    </div>

                    <div class="lx-wrap">
                        <div class="title">关注微信</div>
                        <div class="de">电话联系：400-XXX-XXXX</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="sidebar">
            <div class="sidebar-item">
                <div class="phone-wrap">
                    <div class="icon-wrap item" id="refwx">
                        <img src="./assets/sidebar_icon1.png" alt="" sizes="" srcset="">
                    </div>
                    <div class="icon-wrap item" id="refPhone">
                        <img src="./assets/sidebar_icon2.png" alt="" sizes="" srcset="">
                    </div>
                </div>
            </div>
            <div class="sidebar-item">
                <a href="http://" target="_blank" rel="noopener noreferrer" class="sy-wrap">
                    <div class="icon-wrap item">
                        <img src="./assets/sidebar_icon3.png" alt="" sizes="" srcset="">
                    </div>
                    <div class="text">
                        免费 <br /> 试用
                    </div>
                </a>
            </div>
            <div class="sidebar-item">
                <a href="http://" target="_blank" rel="" class="ai-wrap">
                    <div class="img-wrap">
                        <img src="./assets/sidebar_icon4.png" alt="" sizes="" srcset="">
                    </div>
                    <div class="text">
                        AI <br /> 助<br />理
                    </div>
                </a>
            </div>
            <div class="sidebar-item" @click="goBack">
                <div class="back">
                    <img src="./assets/icon_back.png" alt="返回顶部" sizes="" srcset="">
                </div>
            </div>
        </div>

        <!-- poper container -->
        <div class="poperContainer-bar" id="refPhoneContent">
            <div class="refPhoneContent">
                <div class="item s1">数信XXX XXX电话咨询服务</div>
                <div class="item s2">电话联系：137 5503 2231</div>
            </div>
        </div>
        
        <div class="poperContainer-bar" id="refwxContent" style="width: 200px;">
            <div class="refwxContent">
                <div class="text">请扫描微信二维码</div>
                <img src="./assets/13353749986402008.png" alt="">
            </div>
        </div>
    </div>
    <script>
        const { createApp, ref, onMounted } = Vue
        createApp({
            setup() {
                const mpSwitchActive = ref(0)
                const lc_4Active = ref(0)
                const lc_5Active = ref(0)
                // 菜单切换
                const menuShow = ref(false)
                // 手机号验证
                const PhoneVerify = ref({
                    phone:'',
                    show:false,
                    text:'请输入手机号'
                })
                // 与我们联系提交
                function handlyySubmit(){
                    if(PhoneVerify.value.phone == '') {
                        PhoneVerify.value.text = '手机号不能为空'
                        PhoneVerify.value.show = true
                        return
                    }
                    if(!fnPhoneVerify(PhoneVerify.value.phone)){
                        PhoneVerify.value.text = '请输入正确的手机号'
                        PhoneVerify.value.show = true
                        return
                    }
                    PhoneVerify.value.show = false
                    axios.post('/home/contace', {
                        tel:PhoneVerify.value.phone
                    })
                    .then(function (response) {
                        alert('预约成功')
                    })
                    .catch(function (error) {
                        alert('系统错误')
                    });
                }
                // 手机号验证
                function fnPhoneVerify(phone){
                    // 验证手机号码
                    if (!(/^1[3456789]\d{9}$/.test(phone))) {
                        return false;
                    } else {
                        return true;
                    }
                }
                //名片切换
                function handlSwitchnav(val) {
                    mpSwitchActive.value = val
                }
                //数字私域解决方案切换
                function handlc_4Switch(val) {
                    lc_4Active.value = val
                }
                //成功案例切换
                function handlc_5Switch(val) {
                    lc_5Active.value = val
                }
                // 轮播图初始化
                function swiperInit() {
                    const swiper_1 = new Swiper('.swiper_1', {
                        loop: true, // 循环模式选项
                        //autoplay:true,
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },
                    })
                    const swiper_2 = new Swiper('.swiper_2', {
                        loop: true, // 循环模式选项
                        //autoplay:true,
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },
                    })
                }
                // poper 初始化
                function poperInit() {
                    const refPhoneContent = document.querySelector('#refPhoneContent')
                    const refPhone = document.querySelector('#refPhone')
                    const refwxContent = document.querySelector('#refwxContent')
                    const refwx = document.querySelector('#refwx')
                    createPopperEvent(refPhone, refPhoneContent, {
                        placement: 'left',
                        modifiers: [
                            {
                                name: 'offset',
                                options: {
                                    offset: [0, 30],
                                },
                            },
                        ],
                    })

                    createPopperEvent(refwx, refwxContent, {
                        placement: 'left',
                        modifiers: [
                            {
                                name: 'offset',
                                options: {
                                    offset: [0, 30],
                                },
                            },
                        ],
                    })
                }
                // 返回顶部
                function goBack() {
                    let timer = setInterval(function () {
                        // console.log(1);
                        if (document.documentElement.scrollTop > 0) {
                            document.documentElement.scrollTop -= 200
                        } else {
                            clearInterval(timer)
                        }

                    }, 20)
                }
                // 菜单切换
                function handlMenuSwitch(){
                    menuShow.value = !menuShow.value
                }
                onMounted(() => {
                    swiperInit()
                    poperInit()
                })
                return {
                    mpSwitchActive,
                    lc_4Active,
                    lc_5Active,
                    PhoneVerify,
                    menuShow,
                    handlSwitchnav,
                    handlc_4Switch,
                    handlc_5Switch,
                    goBack,
                    handlyySubmit,
                    handlMenuSwitch
                }
            }
        }).mount('#app')
    </script>
</body>

</html>